<template>
  <div>
    <el-row :gutter="20">
       <el-col :span="24">
        <el-card class="box1" style="height: 64px" shadow="never">
          <el-form :inline="true" :model="pageParams" class="demo-form-inline">
        <el-form-item label="点位搜索:">
          <el-input
            v-model="pageParams.name"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
       <el-form-item label="工单状态:">
          <el-select v-model="pageParams.regionId" placeholder="请选择">
            <el-option
              v-for="item in WorOrder"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
          </el-card>
      </el-col>
       <el-col :span="24">
        <el-card class="box2" style="height: 900px" shadow="never">
      <div class="button">
      <el-button type="primary" @click="isshow = true" icon="el-icon-circle-plus-outline" style="background-color:#ff772f;border:none ">新建</el-button>
      </div>
      <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        type="index"
        label="序号"
        width="80"

        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="点位名称"
        >
      </el-table-column>
      <el-table-column
        prop="region.name"
        label="所在区域"
      >
      </el-table-column>
      <el-table-column
        prop="businessType.name"
        label="商圈类型"
        >
      </el-table-column>
      <el-table-column
        prop="ownerName"
        label="合作商"
        >
      </el-table-column>
      <el-table-column
        prop="addr"
        label="详细地址"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template v-slot="{ row }">
       <el-button type="text" @click="seeDetail(row)" >查看详情</el-button>
       <el-button type="text"  @click="edit(row)">修改</el-button>
       <el-button class="el-button-danger" @click="del(row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   <div class="box2box">
    <div><span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span></div>
     <div class="buttonan">
      <el-button type="info" @click="previousPage">上一页</el-button>
      <el-button type="info" @click="nextPage">下一页</el-button>
      </div>
   </div>
        </el-card>
       </el-col>
    </el-row>
    <!-- 增加的弹窗 -->
    <AddPoint
    ref="addNode"
    :isshow.sync ="isshow"
    @getRegons="getRegons"
    />
    <!-- 显示详情 -->
    <DetailsPoint ref="nodeDetail" :node-detail.sync="nodeDetail"/>
  </div>
</template>

<script>
import { getRegons, getRegonslist, deleteNode } from '@/api/point'
import AddPoint from './components/addPoint.vue'
import DetailsPoint from './components/detailsPoint.vue'
export default {
  components: {
    AddPoint,
    DetailsPoint

  },
  data () {
    return {
      nodeDetail: false,
      isshow: false,
      tableData: [],
      WorOrder: [],
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        regionId: '',
        name: ''
      },
      totalCount: '',
      pageIndex: '',
      totalPage: ''
    }
  },
  created () {
    this.getRegons()
    this.getRegonslist()
  },
  methods: {
    // 点位区域搜索列表
    async getRegonslist () {
      const res = await getRegonslist({ ...this.pageParamss })
      this.WorOrder = res.data.currentPageRecords
      // console.log(res)
    },
    // 点击搜索
    onSubmit () {
      this.getRegons()
    },
    // 渲染页面
    async getRegons () {
      const res = await getRegons({ ...this.pageParams })
      // console.log(res)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.pageIndex = res.data.pageIndex
      this.totalPage = res.data.totalPage
    },
    previousPage () {
      if (this.pageParams.pageIndex === 1) {
        return this.$message.warning('已经是第一页了')
      }
      this.pageParams.pageIndex--
      this.getRegons()
    },
    nextPage () {
      if ((this.totalCount / 10) < this.pageParams.pageIndex) {
        return this.$message.warning('已经是最后一页了')
      }
      this.pageParams.pageIndex++
      this.getRegons()
    },
    seeDetail (row) {
      this.nodeDetail = true
      // 调用子组件请求数据的方法
      this.$refs.nodeDetail.getNodeDetail(row.id)
    },
    // 修改数据
    edit (row) {
      this.$refs.addNode.getEditItem(row.name, row.regionId)
      this.isshow = true
    },
    // 删除数据
    async del (row) {
      await deleteNode(row.id)
      this.$message.success('删除成功')
      // console.log(res)
      if (this.tableData.length === 1) {
        this.pageParams.pageIndex--
      }
      // 刷新页面
      this.getRegons()
    }

  }

}
</script>

<style lang="less" scoped>
.box1 {
  margin-bottom: 20px;
}
form {
  margin-top: -7px;
}
.el-button-danger {
  color: #FF5A5A;
}
.box2box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  line-height: 96px;
  width: 100%;
  height: 96px;
  span {
        font-size: 16px!important;
    color: #dbdfe5!important;
  }
}

</style>
